
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>百度</title>
    <style type="text/css">
        body{
            margin: 0;
            overflow: hidden;
            background: #fff;
        }
        #map{
            position: relative;
            height: 553px;
            border:1px solid #3473b7;
            top: 10px;
        }
    </style>
    <link href='./css/bootstrap.min.css' rel='stylesheet' />
    <link href='./css/bootstrap-responsive.min.css' rel='stylesheet' />
    <script src = '../libs/SuperMap.Include.js'></script>
    <script src = './js/layer/Baidu.js'></script>
    <script type="text/javascript">
        var map, baiduLayer,pointVector,vector,dataAdded=false;
                function init(){
                    map = new SuperMap.Map("map",{controls:[
                        new SuperMap.Control.Navigation() ,
                        new SuperMap.Control.Zoom(),
						new SuperMap.Control.LayerSwitcher(),
						new SuperMap.Control.MousePosition()
                    ]});
                    baiduLayer = new SuperMap.Layer.Baidu();
					vector = new SuperMap.Layer.Vector("vector");
                    map.addLayers([baiduLayer,vector]);
					addData();
                    map.setCenter(new SuperMap.LonLat(0, 0), 0);
                }
       
				function addData(){
            if(!dataAdded)
            {
                vector.removeAllFeatures();
                //点对象
                var point= new SuperMap.Geometry.Point(0,0);
                var pointVector = new SuperMap.Feature.Vector(point);
                pointVector.style={
                    fillColor:"red",
                    strokeColor:"yellow",
                    pointRadius:10
                };

                // 矩形
                var x = 7577600;
                var y = 1900544;
                var w = 8000000;
                var h = 6000000;
                var rectangle = new SuperMap.Geometry.Rectangle(x, y, w, h);
                var rectangleVector = new SuperMap.Feature.Vector(rectangle);
                rectangleVector.style={
                    fillOpacity:0.02,
                    strokeOpacity:0.1
                };
               
                vector.addFeatures([pointVector,rectangleVector]);
                dataAdded=true;
            } else{
                alert("数据已加载。");
            }
        }
       
       


        function removeData()
        {        dataAdded =false;
            vector.removeAllFeatures();
            vector.refresh();
        }
    </script>
</head>
<body onLoad = "init()">
<div id="toolbar">
    <input type="button" class="btn" value ="加载数据"onclick="addData()"/>
    <input type="button" class="btn" value ="移除数据"onclick="removeData()"/>
</div>
<div id = "map"></div>
</body>
</html>